<template>
	<s-layout title="写评价" navbar="normal" :bgStyle="{color:'#fff'}">
		<view class="content">
			<view class="title">{{state.title}}</view>
			<!-- 根据评分显示 -->
			<view class="rate ss-m-t-12 ss-flex-row ss-row-left ss-col-center">
				<text style="color:#A6A6A6;font-size: 36rpx;">总体&nbsp;</text>
				<template v-if="bolidStar > 0"  v-for="i in bolidStar" :key="i" >
					<image @tap="tapStar(i,'bolidStar')" src="https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/storage/creator/202408301441592746.png" mode="aspectFill" class="selected ss-m-r-8"></image>
				</template>
				
				<template v-if="emptyStar>0" v-for="h in emptyStar" :key="h">
					<image @tap="tapStar(h,'emptyStar')"  src="https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/storage/creator/202408301441591230.png" mode="aspectFill" class="selected ss-m-r-8"></image>
				</template>
				<view style="color:#FBA503;">{{bolidStar.toFixed(1)}}</view>
			</view>
			<view class="textarea ss-m-t-20">
				<textarea v-model="state.txt" placeholder="亲，快来点评一下吧！" placeholder-style="color:#CBCBCB;" maxlength="200" />
				<view class="length">{{state.txt.length}}/200</view>
			</view>
			<view class="ss-m-t-20">
				<s-uploader
				fileMediatype="image"
				v-model:url="state.images" 
				:limit="100" 
				:sizeType="['original']"
				:imageStyles="{ width: '156rpx', height: '139rpx' }">
					<view class="morePic ss-p-t-50">
						<image style="width:112rpx;height:92rpx" :src="sheep.$url.cdn('/storage/sjrz/20250407/11925e8fcf7dba2632bcf8bb3152432f.png')"></image>
					</view>
				</s-uploader>
			</view>
			
			<button @tap="submit" class="ss-reset-button btn">去发布</button>
		</view>
	</s-layout>
</template>

<script setup>
	import sheep from '@/sheep';
	import {ref, reactive, computed ,nextTick } from 'vue'
	import { onLoad, onShow, onHide } from '@dcloudio/uni-app';
	const state = reactive({
		id:'',
		title:'',
		mark:5,
		txt:'',
		images:''
	})
	//实心星星数量
	const bolidStar = computed(()=>{
		
		return parseInt(state.mark);
	
	})
	//计算空心
	const emptyStar = computed(()=>{
		
		if(Math.ceil(state.mark)==5){
			
			if(parseFloat(state.mark)<5){
				return 1;
			}else if(parseFloat(state.mark)==5){
				return 0;
			}
		}else{
			return 5-Math.ceil(state.mark);
		}
	})
	
	function tapStar(index,str){
		console.log(index,str,bolidStar)
		if(str=='bolidStar'){
			state.mark=index
		}else{
			state.mark=index+bolidStar.value
		}
	}
	
	
	async function submit(){
		if(!state.txt){
			uni.showToast({
				title:'请填写',
				icon:'none'
			})
		}else{
			const {error} = await sheep.$api.merchant.surprise.comment({
				store_id:state.id,
				content:state.txt,
				images:state.images,
				level:state.mark,
			})
			if(error==0){
				uni.showToast({
					title:'评价成功',
					icon:'none',
					duration:1500
				})
				setTimeout(()=>{
					uni.navigateBack({
						delta:1
					})
				},1500)
			}
		}
	}
	
	
	
	
	
	onLoad((opt)=>{
		if(opt.title){
			state.title = opt.title
		}
		
		if(opt.id){
			state.id = opt.id
		}
	})
	
	
	
</script>

<style lang="scss" scoped>
	
	.content{
		padding:0 58rpx;
		.title{
			color:#000000;
			font-size: 36rpx;
			font-weight: bold;
			margin-top: 67rpx ;
		}
		.rate{
			.selected{
				width:40rpx;
				height:40rpx;
			}
			.recommend{
				font-size: 24rpx;
				font-weight: 500;
				letter-spacing: 0rpx;
			}
			.num{
				font-size: 24rpx;
				font-weight: 500;
				color: rgba(0, 0, 0, 0.8);
			}
		}
		
		.textarea {
			width: 100%;
			background: rgba(0, 0, 0, 0.04);
			padding: 12rpx 20rpx;
			height: 300rpx;
			position: relative;
			box-sizing: border-box;
			
		
			textarea {
				width: 100%;
				height: 100%;
				font-weight: 400;
				font-size: 30rpx;
			}
		
			.length {
				position: absolute;
				right: 20rpx;
				bottom: 20rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #CBCBCB;
			}
		}
		.morePic{
			width: 156rpx;
			height: 139rpx;
			background: #F4F4F4;
			border-radius: 10rpx;
			text-align: center;
		}
		.btn{
			margin-top:283rpx;
			width: 650rpx;
			height: 96rpx;
			border-radius: 100rpx;
			background: #F7D142;
			font-size: 36rpx;
			font-weight: bold;
		}
	}
</style>